<template>
	<view class="headNews">
		<view class="cardBox">
			<view class="border">
				<scroll-view class="goods-scroll" scroll-x="true" >
					<view 
						class="single-card" 
						v-for="item in headNewsList" 
						:key="item.id" 
						@click="skipToBtnPage(item.id,item.name)">
						<image class="card-img" :src="'http://images.zmzpl.com/'+item.img"></image>
						<view class="card-text">{{item.name}}</view>
					</view>
				</scroll-view>
			</view>
			<!-- <view class="today">
				<image class="todayImg" src="../../static/index/today.png" ></image>
				<view class="todayNews">
					年末大礼：uni-app1.4 新增百度、支付宝	、微信、字节跳动
				</view>
				<view class="next">
					<image class="nextImg" src="../../static/index/right.png" ></image>
				</view>
			</view> -->
		</view>
	</view>
</template>

<script>
	export default {
		name:'head-news',
		props:{
			headNewsList:Array
		},
		data() {
			return {
				
			};
		},
		methods:{
			skipToBtnPage(id,title,){
				uni.navigateTo({
					url:`../../pages/goods/goods?id=${id}&title=${title}&type=1`
				})
			}
		}
	}
</script>

<style scoped lang="scss">
.headNews{
	width: 719rpx;
	margin: 0 auto;
	margin-top: 20px;
	background:url(../../static/index/headNewsBgi.png);
	background-repeat: no-repeat;
	background-size: 719rpx 281rpx;
	.cardBox{
		width: 100%;
		padding: 30rpx 11rpx 0 10rpx;
		.border{
			width: 100%;
			padding-bottom:32rpx ;
			// border-bottom: 1rpx dashed #333;
		}
		.single-card{
			width: 90rpx;
			display: inline-block;
			margin-right: 50rpx;
			.card-img{
				width: 90rpx;
				height: 90rpx;
			}
			.card-text{
				text-align: center;
				color: #333333;
				font-size: 24rpx;
				font-weight:500;
				white-space: nowrap;
				line-height: 24rpx;
				// margin-top:25rpx ;
			}
		}
		.today{
			width: 100%;
			display: flex;
			justify-content: space-between;
			padding: 0 26rpx 18rpx 30rpx;
			.todayImg{
				width: 156rpx;
				height: 56rpx;
				
			}
			.todayNews{
				width:444rpx;
				height:25rpx;
				font-size:24rpx;
				font-weight:500;
				color:#333333;
				line-height:25rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				margin-top: 33rpx;
			}
			.next{
				margin-top: 40rpx;
				height: 16rpx;
				line-height: 16rpx;
				.nextImg{
					width: 16rpx;
					height: 16rpx;
				}
			}
		}
	}
}
.goods-scroll{
	width: 100%;
	white-space: nowrap;
	padding: 0 34rpx;
}
</style>
